<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>潜江市经济普查统计分析平台</title>
		<link rel="stylesheet" href="./css/index.css" />

		<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
        <script src="./js/rem.js"></script>
		<script src="./js/vue2.7.14.js"></script>
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="block">
<!--				<div class="main-title">收藏证书</div>
				<div class="main-title2">Collection Certificate</div>-->
                <img class="title-img" src="./img/title.png" />
			</div>


			<div class="block">
				<div class="line1">
					<div class="line1-title">防伪编码:</div>
					<div class="line1-value">{{model.traceCode}}</div>
				</div>
				<div class="line1">
					<div class="line1-title">收藏日期:</div>
					<div class="line1-value">{{dateStr}}</div>
				</div>
			</div>

			<div class="block">
				<img class="img" v-if="model.attachPath" :src="base + model.attachPath" />
			</div>

			<div class="block">
				<div class="wrap">
					<div class="wrap-item">
						<div class="wrap-item-label">作品名称</div>
						<div class="wrap-item-value">{{model.name}}</div>
					</div>
					<div class="wrap-item">
						<div class="wrap-item-label">烧制方式</div>
						<div class="wrap-item-value">{{model.makeWay}}</div>
						<img src="./img/stamp.png" class="stamp" />
					</div>
					<div class="wrap-item">
						<div class="wrap-item-label">材质</div>
						<div class="wrap-item-value">瓷石、高岭土</div>
					</div>
					<div class="wrap-item">
						<div class="wrap-item-label">产地</div>
						<div class="wrap-item-value">中国·景德镇</div>
					</div>
					<div class="wrap-item">
						<div class="wrap-item-label">绘制时间</div>
						<div class="wrap-item-value">{{getBigger(model.productYear)}}</div>
					</div>
					<div class="wrap-item">
						<div class="wrap-item-label">出品</div>
						<div class="wrap-item-value companyName">景德镇市宁封窑陶瓷文化发展有限公司</div>
					</div>
				</div>
			</div>

			<div class="block bottom">
				<img class="logo" src="./img/logo2.png" />
				<img class="logo" src="./img/wx.jpg" />
			</div>

			<div>&nbsp;</div>
		</div>
	</body>
	<script>
        const origin = location.origin
		// const API_HOST = origin + ':10798/fast'
        const API_HOST = 'http://119.91.91.240:10798/fast'
		const mapper = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']

		function getSearch() {
			var search = location.search
			search = search.substr(1)
			const arr1 = search.split('&')
			const params = {}
			arr1.forEach(function(str) {
				const arr2 = str.split('=')
				params[arr2[0]] = arr2[1]
			})
			return params
		}

		new Vue({
			el: '#app',
			data() {
				return {
					base: API_HOST,
					dateStr: '',
					model: {
						traceCode: '',
						attachPath: '',
						id: '',
						makeWay: '',
						name: '',
						productYear: ''
					}
				}
			},
			methods: {
				getBigger(year) {
					const len = year.length
					let i = 0
					const arr = []
					while (i < len) {
						var code = year.charAt(i)
						code = Number(code)
						arr.push(mapper[code])
						i++
					}
					return arr.join('')
				},
				init() {
					const query = getSearch()
					if (!query.id) {
						vant.Toast.fail('没有查到关键id');
						return
					}
					this.dateStr = query.date
					// const loading = vant.Toast.loading({
					// 	duration: 0, // 持续展示 toast
					// 	forbidClick: true,
					// 	message: '加载中',
					// })
					fetch(API_HOST + '/app/common/detail/' + query.id).then(res => res.json()).then(res => {
						const d = res.data
						this.model = d
					})
				}
			},
			mounted() {
				this.init()
			}
		});
	</script>
</html>
